<style lang="scss" scoped>
	.content {
		&-body {
			padding: 30rpx;
			margin-bottom: 200rpx;
		}

		&-bottom {
			&-row {
				// height: 138rpx; 
				padding: 20rpx 0 30rpx 0;
				position: fixed;
				// display: flex;
				// align-items: center;
				width: 100%;
				background-color: #fff;
				bottom: 0;


			}
		}
	}

	.view-button {
		padding: 30rpx;
	}

	.list {
		width: 688rpx;
		padding: 25rpx 0;
		opacity: 1;
		background: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.08);
		margin-top: 30rpx;

		.c999 {
			padding-right: 7rpx;
		}

		.h1 {
			border-left: 6rpx solid #409eff;
			padding: 0 20rpx;
			margin-bottom: 20rpx;
		}

		.contains {
			width: 100%;
			padding: 20rpx;
			border-top: 1px solid #eee;

			.text {
				width: 100%;
				line-height: 60rpx;
			}
		}
	}


	.handleList {
		>li {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #FFFFFF;
			font-weight: 400;
			font-size: 32rpx;
			color: #0F2E4D;
		}

		>.cancel {
			border-top: 10rpx solid #F5F7FA;
			color: #98A5B3
		}
	}

	.border {

		&-bottom {
			border-bottom: 2rpx solid #F5F7FA;
		}
	}

	// .evaluationButton {
	// 	position: fixed;
	// 	bottom: 0%;
	// 	width: 100%;

	// 	background-color: #ffffff;
	// 	height: 138rpx;
	// }
</style>

<template>
	<ListLayout>
		<view class="c999 f28">工单号:{{orderNum}}</view>
		<view v-for="item,index in process" :key="index" v-if="item.operState&&item.operState!='start'">
			<!-- 流程信息 -->
			<view class="list" v-if="item.operState!='complete'">
				<view class="f34 bold h1">{{item.operStateToName}}</view>
				<view class="contains between-flex">
					<view class="text">
						<view class="between-flex">
							<view style="width:60%;"><span class="c999" style="white-space: nowrap;">时间:</span><span
									style="white-space: nowrap;">{{item.createTime}}</span></view>
							<view class="align-flex"><span
									class="c999">{{item.operState | processPerson}}:</span><span>{{item.createUserToName}}</span>
							</view>

						</view>

						<view v-if="item.processValue&&item.operState!='assist'&&item.operState!='allocate'"
							class="flex m-top10">
							<span class="c999" style="line-height: 28rpx;">{{item.operState | processStateText}}:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">
								{{$reason(item.operState,item.processValue)}}
							</view>
						</view>

						<view v-if="item.operState=='assist'" class="flex m-top10" style="flex-wrap: wrap;">
							<view v-for="item2,index2 in item.assistList" :key="index2" style="width:100%;">
								<view class="between-flex" style="width:100%;">
									<view><span class="c999">协作人:</span><span>{{item2.sendUserToName}}</span></view>
									<view style="width:60%;"><span
											class="c999">协作状态:</span><span>{{item2.currStateToName}}</span></view>

								</view>
								<view><span class="c999">协作事务:</span><span>{{item2.content}}</span></view>
							</view>
						</view>
						<view v-if="item.operState=='forward'" class="flex m-top10"><span class="c999"
								style="line-height: 28rpx;">转交至:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">
								{{item.sendUserToName?item.sendUserToName:'无'}}
							</view>
						</view>
						<view v-if="item.remark" class="flex m-top20"><span class="c999"
								style="line-height: 28rpx;">详细说明:</span>
							<view class="" style="width:500rpx;line-height: 30rpx;">{{item.remark?item.remark:'无'}}
							</view>
						</view>

						<view class="flex" v-if="item.processEnclosure"><span class="c999">附件:</span>
							<view>
								<view class="align-flex blue p-left10"
									v-for="item2,index2 in JSON.parse(item.processEnclosure)" @click="$open(item2.url)"
									:key="index2">
									<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
									{{item2.name | rightEllipsis}}
								</view>
							</view>

						</view>
					</view>

				</view>
			</view>
			<view class="list" v-if="item.operState=='complete'">
				<view class="f34 bold h1">{{item.operStateToName}}</view>
				<view class="contains between-flex">
					<view class="text">

						<view><span class="c999">工程师:</span><span>{{make.makeUser | user}}</span></view>
						<view><span class="c999" style="white-space: nowrap;">完成时间:</span><span
								style="white-space: nowrap;">{{item.createTime}}</span></view>
						<view v-if="make.faultType"><span
								class="c999">故障分类:</span><span>{{make.faultType | faultType}}</span></view>
						<view v-if="make.faultRemark" class="flex "><span class="c999">故障描述:</span>
							<view class="" style="width:500rpx;" v-html="make.faultRemark"></view>
						</view>
						<view class="flex "><span class="c999">解决方法:</span>
							<view class="" style="width:500rpx;">
								{{make.makeWay?make.makeWay:'无' | Base64Decode | deleteHTMLTag}}</view>
						</view>

						<view><span class="c999">实际工时: </span><span>{{make.realTime || '-'}}小时</span></view>
						<view class="flex" v-if="make.cooperation"><span class="c999">附件:</span>
							<view>
								<view class="align-flex blue p-left10" v-for="item2,index2 in make.cooperation"
									@click="$open(item2.url)" :key="index2">
									<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
									{{item2.name | rightEllipsis}}
								</view>
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="list">
			<view class="f34 bold h1">创建工单</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">建单人:</span><span>{{fault.createUser | user}}</span></view>
						<view style="width:60%;"><span class="c999" style="white-space: nowrap;">建单时间:</span><span
								style="white-space: nowrap;">{{fault.createTime}}</span></view>
					</view>
					<view class="between-flex">
						<view><span class="c999">来源:</span><span>{{fault.source | source}}</span></view>
						<view style="width:60%;" v-if="fault.reqTime"><span
								class="c999">预计工时(/小时):</span><span>{{fault.reqTime}}</span>
						</view>
					</view>
					<view><span class="c999">故障分类:</span><span>{{fault.faultType | faultType}}</span></view>
					<view v-if="fault.faultRemark" class="flex "><span class="c999" style="">故障描述:</span>
						<view class="" style="width:500rpx;" v-html="fault.faultRemark">

						</view>
					</view>
					<view class="flex " v-if="fault.detailInfo"><span class="c999" style="">详细说明:</span>
						<view class="" style="width:500rpx;">{{fault.detailInfo}}</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">紧急程度:</span><span>{{fault.degree | degree}}</span></view>
						<view style="width:60%;"><span
								class="c999">影响范围:</span><span>{{fault.rangeType | rangeType}}</span></view>
					</view>
					<view><span class="c999">响应类型: </span><span>{{fault.responseType | responseType}}</span></view>
					<view v-if="fault.equipment"><span class="c999">资产名称:</span><span>{{fault.equipment}}</span>
					</view>
					<view v-if="fault.equipment_address "><span class="c999">资产位置:</span><span>{{fault.equipment_address }}</span>
					</view>
					

					<view class="flex" v-if="fault.enclosure"><span class="c999">附件:</span>
						<view>
							<view class="align-flex blue p-left10" v-for="item,index in fault.enclosure"
								@click="$open(item.url)" :key="index">
								<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
								{{item.name | rightEllipsis}}
							</view>
						</view>

					</view>

				</view>

			</view>
		</view>
		<view class="list">
			<view class="f34 bold h1">接听信息</view>
			<view class="contains between-flex">
				<view class="text">
					<view class="between-flex">
						<view><span class="c999">接听人:</span><span>{{info.reception | user}}</span></view>
						<view style="width:60%;"><span class="c999">通话时间:</span><span>{{info.time?info.time:'无'}}</span>
						</view>
					</view>
					<view class="between-flex">
						<view><span class="c999">报修人:</span><span> {{info.user || '-'}}</span></view>
						<view style="width:60%;"><span class="c999">报修人电话:</span><span
								@click.stop="$makephone(info.phone)">{{info.phone || '-'}}</span></view>
					</view>
					<view><span class="c999">报修科室: </span><span>{{info.deptId | subject}}</span></view>
					<view v-if="info.place"><span class="c999">报修地址: </span><span>{{info.place}}</span></view>
					<view class="align-flex" v-if="info.recording"><span class="c999">录音:</span>
						<view class="align-flex blue p-left10" @click="playVoice(info.recording)">
							<u-icon name="play-circle" color="#409EFF" size="38">
							</u-icon>{{info.recording.substring(info.recording.length-10)}}
						</view>
					</view>
				</view>

			</view>
		</view>


		<template #footer>
			<template v-if="ShowEvaluation && IsMyOrder && IsMyComplete && IsEvaluation">
				<view class="view-button">
					<HButton @click="onEvaluation">评价</HButton>
				</view>
			</template>
			<template v-else-if="IsMyOrder">
				<template
					v-if="['receiving','no_examine'].includes( process[0].operState)||  !(['suspend','end_termination','forward','back','complete','end_examine'].includes(process[0].operState))  ">
					<OptionButtonGroup @leftClick="choose(0)" @rightClick="onOptionHandle"></OptionButtonGroup>
				</template>
				<template v-else>
					<view class="view-button" v-if=" process[0].operState=='suspend'">
						<HButton @click="restart">取消暂停</HButton>
					</view>
					<view class="view-button" v-if=" process[0].operState=='end_termination'">
						<HButton @click="restart2">重新开启</HButton>
					</view>
				</template>
			</template>
			<template v-else>
				<!--  -->
			</template>
		</template>
		<!-- 操作处理 弹窗 -->
		<u-popup v-model="visibleHandle" mode="bottom">
			<ul class="handleList">
				<li v-for="(item,index) in handleOptionsList"
					:class="index !==  handleOptionsList.length - 1  ?'border-bottom':''" :key="item.code"
					@click="choose(item.code)">
					{{item.label}}
				</li>
				<li class="cancel" @click="visibleHandle = false">
					取消
				</li>
			</ul>
		</u-popup>


		<u-popup border-radius="24" mode="bottom" v-model="showPopup" :closeable="true">
			<complete :orderNum="orderNum" :isReview="isReview" :info="fault" :data="info" @submit="submit"
				v-if="choosetype==0"></complete>
			<pause :orderNum="orderNum" @submit="submit" v-if="choosetype==1"></pause>
			<dispose :orderNum="orderNum" @submit="submit" v-if="choosetype==2"></dispose>
			<turn :orderNum="orderNum" @submit="submit" v-if="choosetype==3"></turn>
			<help :orderNum="orderNum" @submit="submit" v-if="choosetype==4"></help>
			<stopbtn :orderNum="orderNum" @submit="submit" v-if="choosetype==5"></stopbtn>
			<back :orderNum="orderNum" @submit="submit" v-if="choosetype==6"></back>
			<send :orderNum="orderNum" @submit="submit" v-if="choosetype==8"></send>
		</u-popup>
		<wyb-loading @hide="hide" ref="loading" type="rectangle" title="录音播放中" loading-type="scale-line" />
	</ListLayout>
</template>

<script>
	import ListLayout from '@/components/layout/listLayout.vue'
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	import complete from "@/components/order/complete.vue" //完成
	import pause from "@/components/order/pause.vue" //暂停处理
	import dispose from "@/components/order/dispose.vue" //处理
	import turn from "@/components/order/return.vue" //转交
	import help from "@/components/order/help.vue" //多人协助
	import stopbtn from "@/components/order/stopbtn.vue" //终止
	import back from "@/components/order/back.vue" //退回 
	import send from "@/components/order/send.vue" //升级
	import OptionButtonGroup from '@/components/buttonGroup/optionButtonGroup.vue'
	import HButton from '@/components/button/index.vue'
	import PagesEvaluationRouterConfig from '@/pagesEvaluation/routerConfig.js'
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	import {
		Storage_UserInfo
	} from '@/common/index.js'
	import PagesOrderRouterConfig from '@/pagesOrder/routerConfig.js'
	export default {
		components: {
			ListLayout,
			complete,
			pause,
			dispose,
			turn,
			help,
			stopbtn,
			back,
			send,
			wybLoading,
			OptionButtonGroup,
			HButton

		},
		data() {
			return {
				showPopup: false,
				showbtn: true,
				head: this.$head,
				orderNum: '',
				info: {},
				fault: {},
				make: {},
				process: [], //流程 
				choosetype: 0,
				//是否需要审核
				isReview: false,

				visibleHandle: false,
				handleOptionsList: [{
						label: '处理',
						code: 2
					}, {
						label: '暂停处理',
						code: 1
					}, {
						label: '转交',
						code: 3
					}, {
						label: '多人协助',
						code: 4
					}, {
						label: '工单升级',
						code: 7
					},
					// {
					// 	label:'送修',
					// 	code:8
					// },
					{
						label: '终止工单',
						code: 5
					}, {
						label: '退回',
						code: 6
					}
				]
			}
		},
		onLoad(e) {
			this.orderNum = e.orderNum
			this.isReview = JSON.parse(e.isReview)
			this.getinfo()
			innerAudioContext.onEnded(() => {
				this.$refs.loading.hideLoading()
			});
		},
		computed: {
			//工单结束 + 电话以解决 就无评价 

			ShowEvaluation() {
				let {
					currState,
					operState
				} = this.fault
				return !(currState === 'ended' || operState === 'end_phone')
			},

			//是否能评价
			IsEvaluation() {
				if (this.process.length) {

					let findOrderInfo = this.process.find((item) => {
						return ['wait_appraisal', 'ended'].includes(item.currState)
					})
					return !!Object.values(findOrderInfo || {}).length

				}
				return false
			},

			//  是否由我接单
			IsMyOrder() {

				if (this.process.length) {

					let findOrderInfo = this.process.find((item) => {
						return item.operState === 'receiving'
					})
					let userId = findOrderInfo?.createUser || '';
					return Storage_UserInfo().id == userId

				}


				return false
			},
			// 是否由我完成
			IsMyComplete() {
				if (this.process.length) {

					let findOrderInfo = this.process.find((item) => {
						return item.operState === 'complete'
					})
					let userId = findOrderInfo?.createUser || '';
					return Storage_UserInfo().id == userId

				}
				return false
			}
		},
		methods: {
			restart() { //取消暂停
				uni.showModal({
					title: '确定取消暂停？',
					success: (res) => {
						if (res.confirm) {
							this.$pop.ajaxPost('/wechat/order/open', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('已取消暂停')
									this.getinfo()
								}
							})
						}
					}
				})
			},
			restart2() { //取消暂停
				uni.showModal({
					title: '确定重启工单？',
					success: (res) => {
						if (res.confirm) {
							this.$pop.ajaxPost('/wechat/order/rstart', {
								orderNum: this.orderNum
							}).then(res => {
								if (res.code == 0) {
									this.$msg('已取消暂停')
									this.getinfo()
								}
							})
						}
					}
				})
			},
			submit() {
				this.showPopup = false
				this.visibleHandle = false
				this.getinfo()
			},
			choose(index) {
				if (index == 7) {

					let faultRemark = this.$options.filters.deleteHTMLTag(this.fault?.faultRemark || '')
					let params = {
						user: this.info.user,
						phone: this.info?.phone || '',
						deptId: this.info?.deptId || '',
						orderNum: this.orderNum,
						title: faultRemark
					}
					let query = this.$u.queryParams(params)
					wx.navigateTo({
						url: `${PagesOrderRouterConfig.WorkOrderUp}${query}`
					})
				} else {
					this.showPopup = true
					this.choosetype = index
				}
			},
			playVoice(src) {

				if (src) {
					var a = src.slice(0, 4)
					if (a === 'http') {
						src = src
					} else if (src) {
						src = uni.getStorageSync('imgUrl') + src
					}
					this.$refs.loading.showLoading() // 显示
					innerAudioContext.src = src;
					innerAudioContext.play();
				}
			},
			hide() {
				innerAudioContext.stop();

			},
			onOptionHandle() {
				this.visibleHandle = true
			},
			/**
			 * 评价操作
			 */
			onEvaluation() {
				wx.navigateTo({
					url: `${PagesEvaluationRouterConfig.index}?orderNum=${this.orderNum}&reporter=${this.info.user || ''}`
				})
			},
			getinfo() {
				this.$pop.ajaxPost('/busOrderProcess/getListByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						var list = res.body

						this.process = list
					}
				})
				this.$pop.ajaxPost('/busOrderInfo/getByOrderNum', {
					orderNum: this.orderNum
				}).then(res => {
					if (res.code == 0) {
						this.info = res.body.info || {}
						this.fault = res.body.fault || {}
						this.make = res.body.make || {}
						if (this.make.cooperation) {
							this.make.cooperation = JSON.parse(this.make.cooperation)
						}
						if (this.fault.enclosure) {
							this.fault.enclosure = JSON.parse(this.fault.enclosure)
						}
					}
				})
			}

		}
	}
</script>
